<template>
  <div>
    <van-nav-bar
        title="创建盘点单"
        right-text="提交"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
    />
    <van-field v-model="inventoryName" label="盘点名称" required placeholder="请输入"/>
<div>
<van-cell-group>
  <van-field v-model="value1" label="盘点公司" placeholder="请输入" required  @focus="edit1()" />   
  <!-- @blur="show1=false" -->
</van-cell-group>
<!-- <div class="box" v-if="show1"> -->
  <!-- <div v-for="(item,i) in option11" class="searchitem" :key="i" @click="opt1(item)" >{{item.BUKRST}}</div> -->
<!-- </div> -->
</div>
<div>
<van-cell-group>
  <van-field v-model="value2" label="成本中心" placeholder="请输入"   @focus="edit2()"  />   
  <!-- @blur="show1=false" -->
</van-cell-group>
<!-- <div class="box" v-if="show2"> -->
  <!-- <div v-for="(item,i) in option22" class="searchitem" :key="i" @click="opt2(item)" >{{item.KOSTLT}}</div> -->
<!-- </div> -->
</div>

<!-- <van-button color="#45a9de" block @click="determine()">确定</van-button> -->
<!-- <div >
    <div >
      <van-tag  v-for="(item,i) in formdata.inventoryCenter" size="large" closeable  type="success" @close="close1(item)" :key="i">
  {{item.KOSTLT}}
</van-tag>
    </div>
    <div >
      <van-tag v-for="(item,i) in formdata.inventoryCompany" size="large" closeable  type="primary" @close="close2(item)" :key="i">
       {{item.BUKRST}}
</van-tag>
    </div>
</div> -->
  </div>
  
</template>

<script>
import { Toast } from 'vant';
import awsuiAxios from "../awsuiAxios";
export default {
data(){
    return {
        value1:'',
        value2:'',
        inventoryName:'',
        inventoryCompany:'',
        inventoryCenter:'',
        formdata:{
          inventoryName:'',
          inventoryCompany:[],
          inventoryCenter:[]
        },
        option1: [],
        option11: [],
        option2: [],
        option22: [],
    }
},
watch:{
  inventoryName(n,o){
    this.$store.state.assetsName = n
  }
//     value1( newVla, oldVal){
//       this.option11 = this.option1.filter(item=>{
//         return item.BUKRST.includes(newVla)
//       })
//     },
//     value2( newVla, oldVal){
//       this.option22 = this.option2.filter(item=>{
//         return item.KOSTLT.includes(newVla)
//       })
//     }
},
created(){
  if(JSON.stringify(this.$store.state.Company)==JSON.stringify([])){
    this.getCompany()
  }
},
mounted(){
  this.inventoryName = this.$store.state.assetsName
  this.value1 = ''
  this.value2 = ''

 setTimeout(() => {
   if(JSON.stringify(this.$store.state.Company)!=JSON.stringify([])){
  let temp = ''
  this.$store.state.Company.forEach(element => {
   if(element.checked==true){
    temp+= element.BUKRST +' '
   }
  });
  {this.value1 = temp}
  }
  if(JSON.stringify(this.$store.state.Center)!=JSON.stringify([]))
  { 
    let temp1 = ''
  this.$store.state.Center.forEach(element => {
   if(element.checked==true){
    temp1+= element.KOSTLT +' '
   }
  });
  {this.value2 = temp1}
    }
 }, 100);
 
 
},
methods:{
  getCompany(){
    const that = this
    awsuiAxios.post({
              url: 'jd',
                data: {
                     cmd: "com.awspaas.user.apps.assetinventory_selectCompany",
                    sid:sid,
                }
            }).then(function (ro) {
                if (ro.result == 'ok') {
                    // that.message = ro.data.staffList
                    // that.$router.push({path:'/show',query:{data:ro.data.staffList}})
                    console.log(ro);
                    ro.data.company.forEach(ele => {
                      that.$set(ele,"checked",false)
                    });
                    that.$store.state.Company =  ro.data.company

                }else{
                        Toast.fail('' + ro.msg);
                      }
            }).catch(error => {
                console.log(error);
            })
  },
  getaddTask(){
    const that = this
    let company = ''
    this.$store.state.Company.forEach(item => {
      if(item.checked==true){
        if(company==''){
          company+=item.BUKRS
        }else{
          company+=","+item.BUKRS
        }
      }
    });
    let costCenter = ''
    this.$store.state.Center.forEach(item => {
      if(item.checked==true){
        if(costCenter==''){
          costCenter+=item.KOSTL
        }else{
          costCenter+=","+item.KOSTL
        }
      }
    });
    awsuiAxios.post({
              url: 'jd',
                data: {
                    cmd: "com.awspaas.user.apps.assetinventory_addTask",
                    sid:sid,
                    name:`${that.inventoryName}`,
                    company:company,
                    costCenter:costCenter
                }
            }).then(function (ro) {
                if (ro.result == 'ok') {
                    Toast.success("提交成功")
                    that.$router.push('/testover')
                }else{
                        Toast.fail('' + ro.msg);
                      }
            }).catch(error => {
                console.log(error);
            })
  },
    onClickLeft(){
      this.$router.push('/testover')
    },
    onClickRight(){
      if(this.inventoryName!=''&&this.value1!=""){
          console.log("fffff",this.formdata);
          this.getaddTask()
      }else{
         Toast.fail('请填写完整');
      }
      
    },
    edit1(){
     
     this.$router.push({path:"/option",query:{data:1}})
    },
    edit2(){
     this.$router.push({path:"/option",query:{data:this.option2}})
    },
}
}
</script>

<style scoped>
::v-deep .van-dropdown-menu__bar{
    box-shadow: none;
}
::v-deep .van-ellipsis {
    display: none;
}
::v-deep .van-nav-bar__title {
    display: block;
}
::v-deep .van-icon-clear {
    display: none;
}
::v-deep .van-button--block{
width: 90%;
margin: auto;
border-radius: 6px;
}
::v-deep .van-tag{
    margin: 2px 10px;
}
.box{
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100px;
  overflow-y:scroll;
}
.searchitem {
  
    width: 70%;
    height: 30px;
    border-bottom: 1px solid #ccc;
    background: #ffc;
    margin-left: 110px;
    line-height: 30px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* margin-bottom: 1px; */
}
::v-deep .van-field__control{
  max-width:200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>